<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-change="onTabChange">
      <el-tab-pane label="月度应收" name="month">
        <el-form :inline="true" :model="query" class="query-form" @submit.prevent>
          <el-form-item label="年月">
            <el-date-picker
              v-model="query.month"
              type="month"
              value-format="YYYY-MM"
              placeholder="请选择年月"
              style="width: 120px"
            />
          </el-form-item>
          <el-form-item label="租户名">
            <el-input
              v-model="query.qymc"
              placeholder="请输入租户名"
              style="width: 120px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 数据看板 -->
        <div class="dashboard">
          <div class="dashboard-row">
            <div class="dashboard-item board-blue">
              <span class="label">当月总电费</span>
              <span class="value">{{ dashboard.dbjsdf }}</span>
            </div>
            <div class="dashboard-item board-blue">
              <span class="label">公共电费</span>
              <span class="value">{{ dashboard.dbgsdf }}</span>
            </div>
          </div>
          <div class="dashboard-row">
            <div class="dashboard-item board-green">
              <span class="label">租用应收</span>
              <span class="value highlight">{{ dashboard.hkzyje }}</span>
            </div>
            <div class="dashboard-item board-green">
              <span class="label">租用已收</span>
              <span class="value">{{ dashboard.hkysje }}</span>
            </div>
            <div class="dashboard-item board-green">
              <span class="label">租用未收</span>
              <span class="value">{{ dashboard.hkwsje }}</span>
            </div>
          </div>
        </div>

        <!-- 明细列表 -->
        <el-table :data="list" style="margin-top: 10px">
          <el-table-column prop="hkid" label="房号" align="center" width="100" />
          <el-table-column prop="xm" label="项目" align="center" width="120" />
          <el-table-column prop="qymc" label="租户" align="center" width="300" show-overflow-tooltip />
          <el-table-column
            label="电费周期"
            align="center"
            :formatter="row => `${row.hkks || '--'}~${row.hkjs || '--'}`"
          />
          <el-table-column prop="hkrq" label="应交日" align="center" width="150" />
          <el-table-column prop="hkzt" label="状态" align="center" width="140">
            <template #default="scope">
              <span
                :style="{
                  color:
                    scope.row.hkzt === '已收款'
                      ? '#67C23A'
                      : scope.row.hkzt === '未收款'
                      ? '#F56C6C'
                      : '#E6A23C',
                }"
              >
                {{ scope.row.hkzt || "未收款" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="wsje" label="未交金额" align="center" width="150" />
          <el-table-column label="操作" align="center" width="120">
            <template #default="scope">
              <el-button type="primary" size="small" @click="onDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="query.pageNum"
          v-model:limit="query.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="年度拖欠" name="year">
        <el-form :inline="true" :model="yearQuery" class="query-form" @submit.prevent>
          <el-form-item label="年份">
            <el-date-picker
              v-model="yearQuery.year"
              type="year"
              value-format="YYYY"
              placeholder="请选择年份"
              style="width: 120px"
              @change="getYearNav"
            />
          </el-form-item>
          <el-form-item label="租户名">
            <el-input
              v-model="yearQuery.qymc"
              placeholder="请输入租户名"
              style="width: 120px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getYearList">查询</el-button>
            <el-button @click="resetYearQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 年度指标导航条 -->
        <div class="dashboard">
          <div class="dashboard-row">
            <div class="dashboard-item board-blue">
              <span class="label">当年总电费</span>
              <span class="value">{{ yearNav.dbjsdf }}</span>
            </div>
            <div class="dashboard-item board-blue">
              <span class="label">公共电费</span>
              <span class="value">{{ yearNav.dbgsdf }}</span>
            </div>
          </div>
          <div class="dashboard-row">
            <div class="dashboard-item board-green">
              <span class="label">租用应收</span>
              <span class="value highlight">{{ yearNav.hkzyje }}</span>
            </div>
            <div class="dashboard-item board-green">
              <span class="label">租用已收</span>
              <span class="value">{{ yearNav.hkysje }}</span>
            </div>
            <div class="dashboard-item board-green">
              <span class="label">租用未收</span>
              <span class="value highlight" style="color:#e43d33">{{ yearNav.hkwsje }}</span>
            </div>
          </div>
        </div>

        <!-- 年度拖欠列表 -->
        <el-table :data="yearList" border style="margin-top: 10px">
          <el-table-column prop="hkid" label="房号" align="center" width="100" />
          <el-table-column prop="zt" label="项目" align="center" width="120" />
          <el-table-column prop="qymc" label="租户" align="center" width="300" show-overflow-tooltip />
          <el-table-column
            label="电费周期"
            align="center"
            :formatter="row => `${row.hkks || '--'}~${row.hkjs || '--'}`"
          />
          <el-table-column prop="hkrq" label="应交日" align="center" width="150" />
          <el-table-column prop="hkzt" label="状态" align="center" width="140">
            <template #default="scope">
              <span
                :style="{
                  color:
                    scope.row.hkzt === '已收款'
                      ? '#67C23A'
                      : scope.row.hkzt === '未收款'
                      ? '#F56C6C'
                      : '#E6A23C',
                }"
              >
                {{ scope.row.hkzt || "未收款" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="wsje" label="未交金额" align="center" width="150" />
          <el-table-column label="操作" align="center" width="120">
            <template #default="scope">
              <el-button type="primary" size="small" @click="onDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="yearTotal > 0"
          :total="yearTotal"
          v-model:page="yearQuery.pageNum"
          v-model:limit="yearQuery.pageSize"
          @pagination="getYearList"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { receivableHome, receivableMonthList, receivableYearNav, receivableYearList } from "@/api/bill";
import { parseTime } from "@/utils/ruoyi";

function getLastMonthStr() {
  const d = new Date();
  d.setDate(1); // 设置为当月第一天
  d.setMonth(d.getMonth() - 1);

  console.log(parseTime(d, "{y}-{m}"),parseTime(d),d.getMonth());
  return parseTime(d, "{y}-{m}");
}
function getThisYearStr() {
  return String(new Date().getFullYear());
}

const activeTab = ref("month");

// 月度应收
const query = reactive({
  month: getLastMonthStr(),
  qymc: "",
  pageNum: 1,
  pageSize: 10,
});// mock数据
const dashboard = ref({
  dbjsdf: 120000,
  dbgsdf: 30000,
  hkzyje: 80000,
  hkysje: 60000,
  hkwsje: 20000,
});
const list = ref([
  {
    hkid: "A101",
    xm: "项目一",
    qymc: "租户甲",
    hkks: "2024-05-01",
    hkjs: "2024-05-31",
    hkrq: "2024-06-10",
    hkzt: "已收款",
    wsje: 0,
  },
  {
    hkid: "A102",
    xm: "项目二",
    qymc: "租户乙",
    hkks: "2024-05-01",
    hkjs: "2024-05-31",
    hkrq: "2024-06-10",
    hkzt: "未收款",
    wsje: 5000,
  },
]);
const total = ref(0);

const yearNav = ref({
  dbjsdf: 1500000,
  dbgsdf: 400000,
  hkzyje: 1000000,
  hkysje: 800000,
  hkwsje: 200000,
});
const yearList = ref([
  {
    hkid: "A101",
    zt: "项目一",
    qymc: "租户甲",
    hkks: "2024-01-01",
    hkjs: "2024-12-31",
    hkrq: "2024-12-31",
    hkzt: "已收款",
    wsje: 0,
  },
  {
    hkid: "A102",
    zt: "项目二",
    qymc: "租户乙",
    hkks: "2024-01-01",
    hkjs: "2024-12-31",
    hkrq: "2024-12-31",
    hkzt: "未收款",
    wsje: 20000,
  },
]);
const yearTotal = ref(0);

// 年度拖欠
const yearQuery = reactive({
  year: getThisYearStr(),
  qymc: "",
  pageNum: 1,
  pageSize: 10,
});
 

function getList() {
  receivableHome({ month: query.month }).then(res => {
    dashboard.value = res.data || {};
  });
  receivableMonthList({
    month: query.month,
    qymc: query.qymc,
    page: query.pageNum,
    pageSize: query.pageSize,
  }).then(res => {
    const arr = res.data?.list || [];
    list.value = arr.map(item => ({
      ...item,
      hkrq: item.hkrq ? parseTime(item.hkrq, "{y}-{m}-{d}") : "--",
      hkks: item.hkks ? parseTime(item.hkks, "{y}-{m}-{d}") : "--",
      hkjs: item.hkjs ? parseTime(item.hkjs, "{y}-{m}-{d}") : "--",
    }));
    total.value = res.data?.total || 0;
  });
}
function resetQuery() {
  query.month = getLastMonthStr();
  query.qymc = "";
  query.pageNum = 1;
  query.pageSize = 10;
  getList();
}
function onTabChange() {
  if (activeTab.value === "year") {
    getYearNav();
    getYearList();
  }
}
function onDetail(row) {
  alert("查看明细：" + row.hkid);
}

// 年度拖欠相关
function getYearNav() {
  receivableYearNav({ year: yearQuery.year }).then(res => {
    yearNav.value = res.data || {};
  });
}
function getYearList() {
  receivableYearList({
    year: yearQuery.year,
    qymc: yearQuery.qymc,
    page: yearQuery.pageNum,
    pageSize: yearQuery.pageSize,
  }).then(res => {
    const arr = res.data?.list || [];
    yearList.value = arr.map(item => ({
      ...item,
      hkrq: item.hkrq ? parseTime(item.hkrq, "{y}-{m}-{d}") : "--",
      hkks: item.hkks ? parseTime(item.hkks, "{y}-{m}-{d}") : "--",
      hkjs: item.hkjs ? parseTime(item.hkjs, "{y}-{m}-{d}") : "--",
    }));
    yearTotal.value = res.data?.total || 0;
  });
}
function resetYearQuery() {
  yearQuery.year = getThisYearStr();
  yearQuery.qymc = "";
  yearQuery.pageNum = 1;
  yearQuery.pageSize = 10;
  getYearNav();
  getYearList();
}

// 初始化
getList();
</script>

<!-- 美化后的数据看板样式，适用于 .dashboard 及其子元素 -->
<style scoped>
.query-form {
  margin-bottom: 10px;
}
.dashboard {
  background: #fafdff;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(32,159,240,0.10);
  padding: 28px 18px 18px 18px;
  margin-bottom: 36px;
}
.dashboard-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 0;
}
.dashboard-item {
  flex: 1;
  margin-right: 0;
  background: linear-gradient(135deg, #eaf6ff 0%, #fafdff 100%);
  border-radius: 14px;
  padding: 22px 0 16px 0;
  text-align: center;
  box-shadow: 0 2px 8px rgba(32,159,240,0.06);
  border: 1.5px solid #e6f3fc;
  transition: box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.dashboard-item:not(:last-child) {
  margin-right: 18px;
}
.label {
  font-size: 16px;
  color: #7a8fa7;
  display: block;
  margin-bottom: 10px;
  letter-spacing: 1px;
  font-weight: 500;
}
.value {
  font-size: 30px;
  font-weight: bold;
  color: #222;
  display: block;
  letter-spacing: 1px;
  line-height: 1.2;
}
.value.highlight {
  color: #209ff0;
}
.board-blue {
  border-left: 5px solid #209ff0;
  background: linear-gradient(90deg, #eaf6ff 0%, #fafdff 100%);
}
.board-green {
  border-left: 5px solid #67c23a;
  background: linear-gradient(90deg, #eafff3 0%, #fafdff 100%);
}
.board-orange {
  border-left: 5px solid #faad14;
  background: linear-gradient(90deg, #fff7e6 0%, #fafdff 100%);
}
</style>